<template>
	<view>
		<u-navbar title="投诉建议" :autoBack="true" placeholder>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<u--form labelPosition="left" :model="model" ref="form1">
				<view style="padding: 0 32rpx;background-color: #fff;">
					<u-form-item labelWidth="80" required label="反馈类型" :borderBottom="false" ref="type">
					</u-form-item>
					<u-radio-group v-model="model.address.type" placement="row">
						<u-radio :activeColor="appColor" :customStyle="{marginRight: '14px'}" v-for="(item, index) in radiolist1" :key="index" :label="item.name"
							:name="item.name">
						</u-radio>
					</u-radio-group>
					<view style="height: 16rpx;"/>
					<u-form-item labelWidth="80" required label="反馈描述" :borderBottom="false" ref="remark">
					</u-form-item>
					<u--textarea placeholder="问题描述" v-model="model.address.remark" border="none"></u--textarea>
					<view style="height: 16rpx;"/>
					<u-form-item required labelWidth="80" label="联系方式" :borderBottom="false" ref="contactWay">
					</u-form-item>
					<u--input type="number" placeholder="请输入联系电话" v-model="model.address.contactWay" border="none"></u--input>
					<view style="height: 64rpx;"/>
				</view>
			</u--form>
		</scroll-view>
		<view class="good-detail-bootom">
			<view style="margin: 0 16rpx;height: 100%;width: calc(100vw - 32rpx);display: flex;align-items: center;">
				<view class="good-detail-bootom-r">
					<u-button :throttleTime="300" @click="save" :color="appColor" text="提交" shape="circle"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {submit} from '@/api/home.js';
	export default {
		data() {
			return {
				radiolist1: [{
						name: '景区服务',
						key: 1,
						disabled: false
					},
					{
						name: '小程序功能',
						key: 2,
						disabled: false
					},
					{
						name: '其他',
						key: 3,
						disabled: false
					}
				],
				model: {
					address: {
						type: -1,
						contactWay: '',
						remark: '',
					},
				},
				items: []
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 50 + 'px';
			},
		},
		methods: {
			save() {
				// 验证
				let {type, remark, contactWay} = this.model.address;
				remark = uni.$u.trim(remark);
				contactWay = uni.$u.trim(contactWay);
				if(type === -1) {
					return this.$cuTip('请输入反馈类型');
				}
				if(!uni.$u.test.rangeLength(remark, [1, 50])) {
					return this.$cuTip('请输入1~50位问题描述');
				}
				if(!uni.$u.test.rangeLength(contactWay, [1, 30])) {
					return this.$cuTip('请输入联系电话/邮箱');
				}
				this.$cuLoading('提交中').then(() => {
					let postObj = uni.$u.deepClone(this.model.address);
					if(postObj.type === -1) {
						delete postObj.type
					} else {
						postObj.type = this.radiolist1.find(item => item.name === postObj.type).key;
					}
					submit(postObj).then(res => {
						uni.hideLoading();
						const {success} = res;
						if(success) {
							this.$cuTip('新增成功').then(() => {
								uni.hideLoading();
								uni.navigateBack({
									delta: 1
								})
							})
						} else {
							this.$cuTip('提交失败')
						}
						
					}).catch(() => {
						uni.hideLoading();
						this.$cuTip('提交失败, 请重新提交')
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
	.u-textarea, .u-input {
		background-color: #f5f5f5!important;
	}
	.u-input {
		padding: 0 16rpx!important;
	}
	
	.u-input__content__field-wrapper__field {
		height: 42px!important;
		line-height: 42px!important;
	}
</style>
<style lang="scss" scoped>
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 iOS>11.2*/
		box-sizing: content-box;

		.good-detail-bootom-r {
			flex: 1;
			text-align: right
		}
	}
</style>
